<!--
  时间轴组件
  使用 Element Plus Timeline 展示发展历程的各个阶段
-->
<template>
  <div class="card">
    <h3>发展历程</h3>
    <el-timeline>
      <el-timeline-item
        v-for="stage in stages"
        :key="stage.title"
        :color="stage.color"
        :icon="stage.icon"
      >
        <h4>{{ stage.title }}</h4>
        <p>{{ stage.content }}</p>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  stages: {
    type: Array,
    required: true,
  },
});
</script>

<style scoped>
.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.el-timeline-item__content {
  color: #fff;
}
</style>